<template>
  <div id="TwoSize">
    <div @click="all" v-if="this.showType==1?true:false" class="home-one">
       <div v-if="mains">
      <p class="title">
        类型：
        <span
          v-for="(item,index) in combination"
          :key="index"
          @click="aaa(item.size,index)"
          :class="{nowColor:index == currentClass}"
        >{{item.name}}</span>

        <!-- 金额 笔数 -->
        <span>金额：{{amount*StrokeNumber}}</span>
        <span>笔数：{{StrokeNumber}}</span>
      </p>
      <ul class="aaa">
        <li class="OXXXX">
          <p>/</p>
          <div>
            <p v-for="(child,j) in 10" :key="j">
              <span>{{j}}</span>
            </p>
          </div>
          <p>&nbsp;</p>
        </li>
        <li>
          <p @click="OXXXX(4)">号码 口XXXX 赔率</p>

          <div>
            <p v-for="(child,j) in rouse" :key="j" @click="ziji($event)">
              <span> {{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="OXXXX(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>

        <li class="XOXXX">
          <p @click="XOXXX(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in rouseONE" :key="j" @click="ziji($event)">
              <span> {{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="XOXXX(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
        <li class="XXOXX">
          <p @click="XXOXX(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in rouseTWO" :key="j" @click="ziji($event)">
              <span> {{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="XXOXX(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
        <li class="XXXOX">
          <p @click="XXXOX(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in rouseThree" :key="j" @click="ziji($event)">
              <span>{{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="XXXOX(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
        <li class="XXXXO">
          <p @click="XXXXO(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in rousefour" :key="j" @click="ziji($event)">
              <span>{{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="XXXXO(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
        <li class="X0000">
          <p @click="X0000(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in rousefive" :key="j" @click="ziji($event)">
              <span>{{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="X0000(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
        <li class="XX000">
          <p @click="XX000(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in rousesix" :key="j" @click="ziji($event)">
              <span>{{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="XX000(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
        <li class="XXX00">
          <p @click="XXX00(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in soureseven" :key="j" @click="ziji($event)">
              <span>{{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="XXX00(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
        <li class="X0X0X0">
          <p @click="X0X0X0(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in soureeight" :key="j" @click="ziji($event)">
              <span>{{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="X0X0X0(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
        <li class="X0X000">
          <p @click="X0X000(4)">号码 口XXXX 赔率</p>
          <div>
            <p v-for="(child,j) in sourenine" :key="j" @click="ziji($event)">
              <span>{{child.num}}</span>
              <span>{{child.odds}}</span>
            </p>
          </div>
          <p>
            <el-button
              plain
              size="small"
              @click="X0X000(index)"
              v-for="(item,index) in SingleDouble"
              :key="index"
            >{{ item }}</el-button>
          </p>
        </li>
      </ul>
      <!-- 金额 -->
    <div class="plicenum">
      <div class="plice-one">金额：</div>
      <div>
        <el-input v-model="amount" placeholder></el-input>
      </div>
      <el-row style="margin-left:10px">
        <el-button type="primary" @click="Bets()">下注</el-button>
        <el-button type="primary">取消</el-button>
      </el-row>
    </div>
    </div>
    </div>

    <!-- 封盘 -->
    <div class="typeid" v-if="this.showType==2?true:false">
      <h1>已封盘</h1>
    </div>
    
  </div>
</template>

<script>
import { mapState } from "Vuex";
export default {
  name: "homeOne",
  data() {
    return {
      mains:true,
      form: {
        msg: "",
        yesOrNo: "",
        content: ""
      },
      tableData: [],
      SingleDouble: ["单", "双", "大", "小"],
      XXXXX: "XXXXX",
      currentClass: "0",
      combination: [
        { name: "口口XXX", size: "OOXXX" },
        { name: "口X口XX", size: "OXOXX" },
        { name: "口XX口X", size: "OXXOX" },
        { name: "口XXX口", size: "OXXXO" },
        { name: "X口口XX", size: "XOOXX" },
        { name: "X口X口X", size: "XOXOX" },
        { name: "X口XX口", size: "XOXXO" },
        { name: "XX口口X", size: "XXOOX" },
        { name: "XX口X口", size: "XXOXO" },
        { name: "XXX口口", size: "XXXOO" }
      ],
      list: [],
      pritem: this.$route.query.titleid,
      rules: "OOXXX",
      rouse: [],
      rouseONE: [],
      rouseTWO: [],
      rouseThree: [],
      rousefour: [],
      rousefive: [],
      rousesix: [],
      soureseven: [],
      soureeight: [],
      sourenine: [],
      bet: "", //下注
      id: "",
      name:"",
      StrokeNumber: 0,
      msg:[],
      amount:""
    };
  },

  mounted() {},
  created() {
    this.detail(this.rules);
  },
   computed: {
    ...mapState([ "typedt", "showType"]),
   
  },
  methods: {
     all(msg){
      var arr = $(".main").length
       this.StrokeNumber = arr
    },
    automatic(){
       this.$api.post(
        this.$url.getInfo,
        {},
        res => {
          console.log(res.data,"余额刷新")
          if (res.data.code == 200) {
             this.$store.commit("getUserMsg", JSON.stringify(res.data.data));
          }
        }
      );
    },
    // 下注
    Bets(){
      var arr = $(".main")
      // arr.length = 0
      this.msg = []
      for(let i = 0; i < arr.length; i++){
        
        this.msg.push(arr[i].outerText.substring(0,5))
      }
      this.StrokeNumber = this.msg.length
        this.$api.post(
        this.$url.buy,
        {
         module:this.typedt,
         amount:this.amount,
         items:this.msg
        },
        res => {
          if (res.data.code == 200) {
             this.$message({
              type: "success",
              message: "下注成功!"
            });
             this.automatic()
             this.mains = false
            setTimeout(()=>{
              this.mains = true
            },200)
             this.$router.go(0)
            this.amount = "";
            this.StrokeNumber = 0
          } else {
            this.$message.error(res.data.msg);
          }
        }
      );
    },
    // 接口
    detail() {
      this.$api.post(
        this.$url.odds,
        {
          module: this.pritem,
          key: this.rules
        },
        res => {
          if (res.data.code == 200) {
            (this.rouse = res.data.data[0]),
              (this.rouseONE = res.data.data[1]),
              (this.rouseTWO = res.data.data[2]),
              (this.rouseThree = res.data.data[3]),
              (this.rousefour = res.data.data[4]),
              (this.rousefive = res.data.data[5]),
              (this.rousesix = res.data.data[6]),
              (this.soureseven = res.data.data[7]),
              (this.soureeight = res.data.data[8]),
              (this.sourenine = res.data.data[9]);
            console.log(res.data, "二字进");
          }
          
          console.log(this,name,"idoid")
          console.log(this.key, 888888888888888);
        }
      );
    },
    aaa(size, index) {
      this.rules = size;
      console.log(this.rules, 877777);
      this.currentClass = index;
      this.detail();
      var sizeArr = size.split("");
      console.log(sizeArr);
      var place = [];
      var end = [];
      var base = ["X", "X", "X", "X", "X"];
      for (let i = 0; i < sizeArr.length; i++) {
        if (sizeArr[i] == "O") {
          place.push(i);
        }
      }
      console.log(place);
      for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
          base = ["X", "X", "X", "X", "X"];
          base[place[0]] = i;
          base[place[1]] = j;
          end.push(base.join(",").replace(/,/g, ""));
        }
      }
      console.log(end);
      // var arr = 00,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,290
      var x = Math.ceil(end.length / 10);
      var index = 0;
      var len = 10;
      var array = [];
      for (var i = 0; i < x; i++) {
        var o = [];
        for (var j = index; j < len; j++) {
          o.push(end[j]);
        }
        index += 10;
        len += 10;
        array.push(o);
      }
      this.list = array;
      console.log(array);
    },
    OXXXX(i,rouse) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      console.log(this.rouse,"XXX00")
      if (i == 0) {
        $(".aaa>li:eq(1)>div>p:odd").toggleClass("main");
        $(".aaa li:eq(1)>div>p:odd> ").toggleClass("aaa");
      }
      if (i == 1) {
        $(".aaa>li:eq(1)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa>li:eq(1)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa>li:eq(1)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa>li:eq(1)>div>p").toggleClass("main");
      }
    },
    XOXXX(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(2)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(2)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(2)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(2)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(2)>div>p").toggleClass("main");
      }
    },
    XXOXX(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(3)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(3)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(3)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(3)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(3)>div>p").toggleClass("main");
      }
    },
    XXXOX(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(4)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(4)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(4)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(4)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(4)>div>p").toggleClass("main");
      }
    },
    XXXXO(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(5)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(5)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(5)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(5)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(5)>div>p").toggleClass("main");
      }
    },
    X0000(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(6)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(6)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(6)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(6)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(6)>div>p").toggleClass("main");
      }
    },
    XX000(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(7)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(7)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(7)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(7)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(7)>div>p").toggleClass("main");
      }
    },
    XXX00(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(8)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(8)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(8)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(8)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(8)>div>p").toggleClass("main");
      }
    },
    X0X0X0(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(9)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(9)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(9)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(9)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(9)>div>p").toggleClass("main");
      }
    },
    X0X000(i) {
      console.log(i);
      $(".aaa>li>div>p").removeClass("main");
      if (i == 0) {
        $(".aaa li:eq(10)>div>p:odd").toggleClass("main");
      }
      if (i == 1) {
        $(".aaa li:eq(10)>div>p:even").toggleClass("main");
      }
      if (i == 2) {
        $(".aaa li:eq(10)>div>p:gt(4)").toggleClass("main");
      }
      if (i == 3) {
        $(".aaa li:eq(10)>div>p:lt(5)").toggleClass("main");
      }
      if (i == 4) {
        $(".aaa li:eq(10)>div>p").toggleClass("main");
      }
    },
    ziji(event) {

      if (event.currentTarget.className !== "main") {
        event.currentTarget.className = "main";
      } else {
        event.currentTarget.className = "";
      }   
    }
  }
};
</script>
<style lang="less" scoped>
.typeid{
  display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.plicenum {
  display: flex;
  position: absolute;
     bottom: 10%;
  .plice-one {
    margin-top: 10px;
  }
}
.home-one {
  width: 100%;
  .title {
    width: 100%;
    background: rgb(114, 111, 111);
    color: aliceblue;
    padding-left: 10px;
    box-sizing: border-box;
    span {
      padding: 0px 20px;
    }
  }
  .aaa {
    li {
      float: left;
      width: 9%;
      box-sizing: border-box;
      border: 1px solid #999;
      p {
        line-height: 35px;
        text-align: center;
        border-top: 1px solid #999;
      }
    }
    li:nth-child(1) {
      width: 3%;
    }
  }
}
.main {
  background: rgb(233, 223, 90);
}
.aaa {
  background: skyblue;
}
.nowColor {
  color: yellow !important;
}
</style>
